<template>
  <div class="waybill_drawer">
    <!-- 导入模板的 -->
    <el-drawer
      title="运单批量导入"
      :visible.sync="drawerData"
      :direction="direction"
      :before-close="handleClose"
      :wrapperClosable="false"
      size="50%"
      :with-header="false"
    >
      <div>
        <div class="header">
          <span class="order-title">导入操作流程</span>
          <!-- <div class="order-right">
            <span class="order-close">
              <i class="el-icon-close" @click="orderclose" />
            </span>
          </div> -->
        </div>
        <div class="body_center">
          <div class="first_step">
            <div style="color: #378cbe">操作流程:</div>
            <div>
              <span>第一步:</span>
              <span>&nbsp;&nbsp;下载导入模板</span>
              <span style="padding-left: 10px" @click="innerDrawerTure()">
                <span class="el-icon-setting" style="color: #0097cf"></span>
                <span style="color: #0097cf">设置模板</span>
              </span>
            </div>
            <div>
              <span style="color: #ff9a00">
                如需要调整模板字段,点击模板设置</span
              >
              <el-button type="primary" style="float: right">
                <span v-if="apiUrl != ''">
                  <span class="el-icon-download"></span>
                  <a :href="apiUrl" style="color: #ffffff">下载模板</a>
                </span>
                <span v-if="apiUrl == ''" @click="DowneTemplate()">
                  <span class="el-icon-setting"></span>
                  <span>请设置模板</span>
                </span>
              </el-button>
            </div>
          </div>
          <div class="second_step">
            <div>第二步:</div>
            <div>
              <span style="color: #ff9a00">
                文件不超过2M,建议先上传少量数据测试导入数据的有效性
              </span>
              <div style="float: right">
                <el-upload
                  class="upload-demo"
                  ref="add-upload"
                  action
                  multiple
                  :auto-upload="false"
                  :file-list="fileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-change="handleChange"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload2"
                    >点击上传</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
          <div class="third_step">
            <div>
              <span>第三步:&nbsp;&nbsp;提交导入</span>
              <el-button
                type="primary"
                icon="el-icon-thumb"
                style="float: right"
                @click="derive()"
                >提交导入</el-button
              >
            </div>
          </div>
          <div class="four_step">
            <div>第四步:&nbsp;&nbsp;在消息中心通知导入结果</div>
          </div>
        </div>
      </div>
      <el-drawer
        title="设置模板"
        size="40%"
        :with-header="false"
        :append-to-body="true"
        :before-close="LeadTemplate"
        :visible.sync="innerDrawer"
        :wrapperClosable="false"
      >
        <div class="header">
          <span class="order-title">设置模板</span>
          <div class="order-right">
            <span class="order-close">
              <i class="el-icon-close" @click="LeadTemplate" />
            </span>
          </div>
        </div>
        <div class="Wear_reduction_box">
          <el-transfer
            v-model="WearValue"
            :data="WearData"
            :titles="['选填', '必填']"
          >
          </el-transfer>
        </div>
        <div class="Wear_reduction_download">
          <el-button
            icon="el-icon-circle-check"
            type="primary"
            @click="reductionDown()"
            >确认模板</el-button
          >
        </div>
      </el-drawer>
    </el-drawer>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  name: "import",
  props: ["drawerData"],
  data() {
    return {
      direction: "rtl",
      innerDrawer: false,
      WearValue: [], //显示列的数据
      WearData: [],
      url: process.env.VUE_APP_URL,
      apiUrl: "",
      resources_uri: "",
      reqUrl: "",
      resour_url: "",
      fileList: [],
    };
  },
  computed: {},
  methods: {
    handleExceed(file) {
      // console.log("=+++++++++")
    },
    handleChange(file, fileList) {
      this.fileList = file.raw;
    },
    DowneTemplate() {
      this.innerDrawer = true;
      this.innerDrawerTure();
    },
    //设置导入模板
    LeadTemplate() {
      this.innerDrawer = false;
    },
    reductionDown() {
      //   var data = [];
      //   this.WearValue.forEach((val) => {
      //     var list = this.WearData.filter((e) => {
      //       return e.id == val;
      //     });
      //     data.push(list[0].label);
      //   });
      //   var formData = JSON.stringify(data);
      //   downloadDemo(formData).then((res) => {
      //     this.apiUrl = this.url + res.data.resources_uri;
      //     this.resources_uri = res.data.resources_uri;
      //     this.LeadTemplate();
      //   });
    },

    handleClose() {
      this.$emit("drawerShow", false);
    },
    //导入接口
    ClickWaybillImportFn() {
      WaybillImportFn().then((res) => {});
    },
    derive() {
      const formData = new FormData();
      formData.append("file", this.fileList);
      formData.append("token", getToken("Cookie"));
      //   customerImport(formData).then((res) => {
      //     var msg = res.msg;
      //     this.ContentSuccess(msg);
      //   });
    },
    ContentSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },

    // 导出
    handleExport() {
      //   var objselectedNums = JSON.stringify(this.selectedNums);
      //   reqExportNotice(objselectedNums).then((res) => {
      //     this.reqUrl = this.url + res.data.resources_uri;
      //     let aDom = document.createElement("a")
      //     aDom.href = this.reqUrl
      //     aDom.click()
      //   });
      alert("导出");
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-drawer__header {
  margin-bottom: 0px !important;
  background: #eee !important;
  border-bottom: 1px solid #ccc !important;
  padding: 10px 20px 10px 20px !important;
}
// 头部信息
.header {
  width: 100%;
  height: 36px;
  background: #5a6d82;
  line-height: 36px;
  .order-title {
    color: #fff;
    font-size: 14px;
    padding-left: 12px;
  }
  .order-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 35px;
    line-height: 35px;
    .order-close {
      height: 35px;
      display: inline-block;
      overflow: hidden;
      position: relative;
      padding: 0 10px;
      cursor: pointer;
      color: #fff;
    }
  }
}
// 中间信息
.body_center {
  width: 98%;
  height: 400px;
  // border: 1px solid #dddddd;
  margin: 10px auto;
  .first_step {
    width: 98%;
    height: 90px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .second_step {
    width: 98%;
    height: 62px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .third_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .four_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
}
</style>